<template>
    <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="事故标题">
            <el-input v-model="form.AccidentTitle" placeholder="事故标题" clearable />
        </el-form-item>
        <el-form-item label="事故日期">
            <el-date-picker v-model="form.AccidentTime" type="date" aria-label="Pick a date" placeholder="事故日期"
                style="width: 100%" format="YYYY/MM/DD"
                value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="车牌号">
            <el-input v-model="form.AccidentBand" placeholder="车牌号" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="GetRepair">查询</el-button>
            <el-button @click="onSubmit">重置</el-button>
            <el-button type="primary" @click="Updaterepaoir">新增</el-button>
            <el-button type="primary" @click="PiDeleteId">删除</el-button>
        </el-form-item>
    </el-form>
    <button @click="exportExcel">导出Excel</button>
    <el-table :data="repairList" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="accidentTitle" label="事故标题" width="100px" />
        <el-table-column prop="accidentBand" label="车牌号" width="100px" />
        <el-table-column prop="accidentDesc" label="事故描述" width="110px" />
        <el-table-column prop="accidentEconomy" label="直接经济损失" width="120px" />
        <el-table-column prop="accidentPrice" label="保险公司赔偿" width="110px" />
        <el-table-column prop="accidentLoss" label="公司净损失" width="100px" />
        <el-table-column prop="accidentName" label="事发人" width="80px" />
        <el-table-column prop="accidentTime" label="事故日期" width="100px">
            <template #default="scope">
                {{ scope.row.accidentTime }}
            </template>
        </el-table-column>
        <el-table-column prop="accidenRemark" label="备注" width="60px" />
        <el-table-column prop="createDate" label="创建时间" width="100px">
            <template #default="scope">
                {{ scope.row.createDate}}
            </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" >
            <template #default="scope">
                <el-button type="primary" @click="RepairId(scope.row.accidentId)">编辑</el-button>
                <el-button type="primary" @click="DeleteId(scope.row.accidentId)">删除</el-button>
                <el-button type="primary" @click="AccidentIdInfo(scope.row.accidentId)">查看</el-button>
            </template>
        </el-table-column>
    </el-table>

    <table>
        <tr>
            <td>
                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                    :page-sizes="[2, 3, 4, 5]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="total,slot, sizes" :total="page.tatolCount">

                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                    :page-sizes="[2, 3, 4, 5]" :background="true" prev-text="上一页" next-text="下一页"
                    layout=" slot, prev, pager, next" :total="page.tatolCount">
                    <el-button type="primary" :disabled="page.pageIndex == 1" @click="page.pageIndex = 1">首页</el-button>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                    :page-sizes="[2, 3, 4, 5]" :background="true" prev-text="上一页" next-text="下一页" layout="slot,jumper"
                    :total="page.tatolCount">
                    <el-button type="primary" :disabled="page.pageIndex == page.totalPage"
                        @click="page.pageIndex = page.totalPage">尾页</el-button>
                </el-pagination>
            </td>
        </tr>
    </table>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, watch } from 'vue'
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus'
const router = useRouter();
const route = useRoute();
import * as XLSX from 'xlsx';
const form = reactive({
    AccidentTitle: "",
    AccidentTime: "",
    AccidentBand: "",
})
const page = reactive({
    pageIndex: 1,
    pageSize: 2,
    tatolCount: 0,
    totalPage: 0,
})

const repairList = ref([])
watch(page, () => {
    GetRepair()
})
const GetRepair = () => {
    axios.get("/ReadMaintent/api/Repairs/GetAccidentShow", {
        params: {
            pageIndex: page.pageIndex,
            pageSize: page.pageSize,
            AccidentTitle: form.AccidentTitle,
            AccidentTime: form.AccidentTime,
            AccidentBand: form.AccidentBand
        }
    })
        .then(res => {
            repairList.value = res.data.data.plist
            page.tatolCount = res.data.data.tatolCount
            page.totalPage = res.data.data.totalPage
        })
}
const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
}

const Updaterepaoir = () => {
    router.push({
        name: "AccidentAdd"
    })
}
const RepairId = (id: number) => {
    router.push({
        name: "AccidentUpdate",
        query: {
            id: id
        }
    })
}

const AccidentIdInfo = (id: number) => {
    router.push({
        name: "AccidentInfo",
        query: {
            id: id
        }
    })
}
const DeleteId = (id: any) => {
    ElMessageBox.confirm(
        '你确定要删除吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            console.log(id)
            axios.post("/Maintent/api/Accidents/DeleteAccident",{
                id:id,
                deleteName:null
            })
                .then(res => {
                    if (res.data.data > 0) {
                        ElMessage.success("删除成功")
                        GetRepair()
                    }
                    else {
                        ElMessage.error("删除失败")
                    }
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}

const RepairIdList = ref([])

const PiDeleteId = () => {

    multipleSelection.value.forEach((a: any) => {
        RepairIdList.value.push(a.accidentId)
    })
    console.log(RepairIdList.value)

    ElMessageBox.confirm(
        '你确定要删除吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.post("/Maintent/api/Accidents/PiDeleteAccident", {
                id: RepairIdList.value
            })
                .then(res => {
                    if (res.data.data > 0) {
                        ElMessage.success("删除成功")
                        GetRepair()
                    }
                    else {
                        ElMessage.error("删除失败")
                    }
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}

onMounted(() => {
    GetRepair()
})
const onSubmit = () => {
    form.AccidentTitle = ""
    form.AccidentTime= ""
    form.AccidentBand= ""
}
//导出

const exportExcel = () => {
    const worksheet = XLSX.utils.json_to_sheet(multipleSelection.value);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const fileName = '事故导出数据.xlsx';
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    link.click();
    URL.revokeObjectURL(link.href);
};
</script>